<!--
   弹出层 html、css、js 封装在此同一个模板文件中，模块化管理
 -->

### isAdd 为 true 表示创建分类，为 false 表示修改分类
#set(isAdd = (category == null))

<!-- 弹出层 title -->
<div class="layui-layer-title" style="cursor: move;">
	#(isAdd ? '创建标签' : '修改标签')
</div>

<!-- 弹出层主体内容 -->
<div class="open-box">
	<form id="open-form" action="/admin/articleTag/#(isAdd ? 'save' : 'update')" onsubmit="return false;">
		
		#if( ! isAdd )
			<input type="hidden" name="category.id" value="#(category.id)">
		#end
		
		### 参考 bootstrap 文档：垂直排列表单
		<div class="form-group d-flex">
			<label class="col-form-label">名称</label>
			<div class="flex-grow-1 ml-3">
				<input type="hidden" name="category.pid" value="0" id="categoryPid"/>
				<input type="hidden" name="category.type" value="tag" />
				<input class="form-control" name="category.name" value="#(category.name??)" type="text" autocomplete="off">
			</div>
		</div>

		<div class="form-group d-flex">
			<label class="col-form-label">简称</label>
			<div class="flex-grow-1 ml-3">
				<input class="form-control" name="category.slug" value="#(category.slug??)" type="text" autocomplete="off"/>
			</div>
		</div>
	</form>
</div>

<!-- 弹出层 button -->
<div class="layui-layer-btn" style="padding: 0 25px 20px 0;">
	<a class="layui-layer-btn0">确定</a>
	<a class="layui-layer-btn1">取消</a>
</div>
<!-- 弹出层样式 -->
<style>
/* 限定左侧 label 宽度，使右侧 input 输入框的宽度保持一致，实现对齐的效果 */
.col-form-label {
	width: 80px;
	text-align: center;
}
#categoryTree{
    background-color:#fff;
    border:1px solid #ced4da;
    width:80%;
    visibility: hidden;
    z-index:999;
    overflow-y:scroll;
    height:160px;
}
#categoryTree[data-show] {
  visibility:visible;
}
.form-switch{
  margin-top:6px;
}
</style>


<!-- 弹出层 js 脚本 -->
<script>
	function submitAccount() {
		var $form = $('#open-form');
		var loading = kit.loading('正在处理, 请稍候 .....');
		kit.post($form.attr('action'), $form.serialize(), function(ret) {
			loading.close();		// 关闭 loading 层
			if (ret.state == 'ok') {
				layer.closeAll();	// 提交成功关闭 open 弹出层
				kit.fill('/admin/articleTag/index', null, '#content-box');
			}
			kit.msg(ret, {time:3200, closeBtn:2});
		});
	}      
    (function($){
		$('#open-form input:first').focus();
		// 绑定提交按钮事件
		$(".layui-layer-btn0").on("click", submitAccount);   	
    	
    })(jQuery)
</script>



